<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core">
    
    <style>
        .ui-menubutton button{
            width: 25px;
            height: 18px !important;
        }
    </style>
  

    <p:panel header="Inicio" style="border: none;">
        <div align="center">
            
            <p> <h:outputText value="LISTADO DE ALUMNOS" style="font-weight: bold; font-size: 18px; color:#069;"/> </p>
            <h:outputText value="Aquí se muestra los bachilleres que pasaron los filtros de validación (Requisitos)"/>
            <br/><br/>
            <h:form id="formBachillor">
                <p:dataTable id="tableBachillor" value="#{trackingBachilorBean.listBachilor}"
                             var="bachilor" filteredValue="#{trackingBachilorBean.listBachilorFilter}"
                             paginator="true" rows="10" style="border-radius: 0px; width: 70%" >

                    <p:column style="width: 3%">  
                        <p:menuButton id="button" value=" ">
                            <p:menuitem value="Detalles" icon="ui-icon-circle-zoomin" oncomplete="bachilorDetail.show()" update=":bachilorDetaildId">
                                <f:setPropertyActionListener value="#{bachilor}" target="#{trackingBachilorBean.bachilor}"/>
                            </p:menuitem>
                            <p:menuitem value="Editar" icon="ui-icon-circle-zoomin" oncomplete="bachilorEdit.show()" update=":bachilorEditId">
                                <f:setPropertyActionListener value="#{bachilor}" target="#{trackingBachilorBean.bachilor}"/>
                            </p:menuitem>
                        </p:menuButton> 
                    </p:column> 
                    
                    <p:column footerText="Codigo Alumno" filterBy="codeAlumn"
                              filterMatchMode="startsWith" style="width: 50%">
                        <h:outputText value="#{bachilor.codeAlumn}"/>
                    </p:column>

                    <p:column headerText="Día Asignación" sortBy="dateIn" style="width: 20%">
                        <h:outputText value="#{bachilor.dateIn}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Estado" sortBy="state">
                        <h:outputText value="#{bachilor.state}" style="width: 30%"/>
                    </p:column>
                    
                </p:dataTable>
            </h:form>
        </div>
    </p:panel>

    <p:dialog appendTo="@(body)" closable="true" closeOnEscape="true" modal="true"
              widgetVar="bachilorEdit" id="bachilorEditId" header="Editar de Bachiller">

        <p:panelGrid columns="2" style="width: 400px;" >

            <f:facet name="header">
                <h:outputText value="Editando Alumno - Bachiller"/>
            </f:facet>
            <h:outputText value="Código Alumno"/>
            <h:outputText value="#{trackingBachilorBean.bachilor.codeAlumn}"/>

            <h:outputText value="Día Asignación"/>
            <p:calendar value="#{trackingBachilorBean.bachilor.dateIn}"/>

            <h:outputText value="Estado"/>
            <h:outputText value="#{trackingBachilorBean.bachilor.state}"/>

            <h:outputText value="Descripción"/>
            <p:inputTextarea value="#{trackingBachilorBean.bachilor.description}" autoResize="false"/>

            <f:facet name="footer">
                <p:commandButton value="Guardar" update="formBachillor" 
                                 action="#{trackingBachilorBean.editBachilor}"/>
            </f:facet>
        </p:panelGrid>
        
    </p:dialog>
    
    <p:dialog appendTo="@(body)" closable="true" closeOnEscape="true" modal="true"
              widgetVar="bachilorDetail" id="bachilorDetaildId" header="Detalle de Bachiller">

        <p:panelGrid columns="2" style="width: 400px;" >

            <f:facet name="header">
                <h:outputText value="Detalle de Alumno - Bachiller"/>
            </f:facet>
            <h:outputText value="Código Alumno"/>
            <h:outputText value="#{trackingBachilorBean.bachilor.codeAlumn}"/>

            <h:outputText value="Día Asignación"/>
            <h:outputText value="#{trackingBachilorBean.bachilor.dateIn}"/>

            <h:outputText value="Estado"/>
            <h:outputText value="#{trackingBachilorBean.bachilor.state}"/>

            <h:outputText value="Descripción"/>
            <h:outputText value="#{trackingBachilorBean.bachilor.description}"/>

        </p:panelGrid>
    </p:dialog>
    
</ui:composition>
